/**
 * 用来设置book首页的轮播图
 */

// 获取可视盒子
const slide_box = document.getElementById('book_slide_show')
//获取图片盒子
const pic_box = document.querySelector('#book_slide_show > ul')
//获取焦点盒子
const point_box = document.querySelector('#book_slide_show > ol')
// 获取可视区宽度
const window_width = slide_box.clientWidth
// 准备一个变量，用来记录当前是第几张
let index = 1;
//  准备一个变量，用来接收定时器id
let loopTimer = null

// 设置焦点
setPoint()
// 复制元素
copyEle()
// 自动轮播
autoPlay()
// 移入移出
overOut()
// 触摸焦点切换的函数
pointClick()

// 设置焦点的函数
function setPoint() {
    // 根据图片盒子子元素的数量设置相应焦点
    const pointNum = pic_box.children.length

    // 生成焦点li
    const frg = document.createDocumentFragment()

    for (let i = 0; i < pointNum; i++) {
        const li = document.createElement('li')
        // 第一个有active
        if (i == 0) {
            li.className = 'active'
        }
        // 设置的时候，把索引记录下来
        li.setAttribute('index', i)
        // 设置li元素里面的值
        li.append(i+1)

        frg.appendChild(li)
    }
    // 设置焦点盒子的宽度
    point_box.style.width = pointNum * 20 * 2 + 'px'
    // 一次性把frg丢到焦点盒子里面
    point_box.appendChild(frg)
}

// 复制元素的函数
function copyEle() {
    // 把第一个元素和最后一个元素克隆
    const first = pic_box.firstElementChild.cloneNode(true)
    const last = pic_box.lastElementChild.cloneNode(true)

    //放入到盒子中
    pic_box.appendChild(first)
    pic_box.insertBefore(last, pic_box.firstElementChild)

    //重新设置可视区的宽度
    pic_box.style.width = window_width * pic_box.children.length + 'px'

    //来到-1个可视区的宽度
    pic_box.style.left = -1 * window_width + 'px'
}

// 自动轮播的函数
function autoPlay() {
    loopTimer = setInterval(() => {
        // 先执行index
        index++

        moveEnd()

        // 让当前有active
        point_box.children[index - 1].className = 'active'
    }, 2000)
}

// 移入移出的函数
function overOut() {
    // 把事件绑定给可视盒子
    slide_box.addEventListener('mouseover', () => clearInterval(loopTimer))
    slide_box.addEventListener('mouseout', () => autoPlay())
}


// 移动函数
function moveEnd() {

    // 让图片盒子左移
    pic_box.style.left = -index * window_width + 'px'

    // 当index等于，也就是最后一个的时候，拉回第一个
    if (index === pic_box.children.length - 1) {
        index = 1
        pic_box.style.left = - index * window_width + 'px'
    }

    // 如果index==0，也就是，看到的是第0张，其实是第五张
    if (index === 0) {
        index = pic_box.children.length - 2

        pic_box.style.left = -index * window_width + 'px'
    }


    // 让所有的焦点都没有active
    for (let i = 0; i < point_box.children.length; i++) {
        point_box.children[i].className = ''
    }

    // 让当前有active
    point_box.children[index - 1].className = 'active'

}

// 触碰焦点切换的函数
function pointClick() {
    // 事件委托给point_box
    point_box.addEventListener('mouseover', e => {
        const target = e.target



        // 通过标签名判断是否是焦点
        if (target.tagName === 'LI') {

            index = target.getAttribute('index') - 0 + 1
            moveEnd()
        }
    })
}